<template>
  <el-card style="margin:20px">
    <el-row>
      <el-col>
        <el-input placeholder="教师姓名" style="width: 300px;margin-bottom: 20px" v-model="queryInfo.teacherName">
          <el-button slot="append" icon="el-icon-search" @click="getTeacherList"
                     clearable type="primary"></el-button>
        </el-input>

        <el-button icon="el-icon-s-custom" @click="addTeacher" type="primary" style="margin-left: 20px">添加教师
        </el-button>
        <el-button icon="el-icon-delete" @click="removeTeachers" type="danger" style="margin-left: 20px">批量删除
        </el-button>

      </el-col>
    </el-row>

    <el-table border stripe :data="greatTeacher" ref="teacherRef">

      <el-table-column
          type="selection"
          width="55">
      </el-table-column>

      <el-table-column type="index" label="序号" width="60px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ (page - 1) * limit + (scope.$index + 1) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="教师姓名" prop="teacherName">
      </el-table-column>

      <el-table-column label="教师图片">
        <template slot-scope="scope">
          <img :src="scope.row.teacherImg" style="width:150px;"/>
        </template>
      </el-table-column>

      <el-table-column label="老师介绍" prop="teacherIntro" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="任职经历" prop="teacherExp" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="项目经验" prop="teacherProject" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="技术简介" prop="teacherTechn" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑教师资料" placement="top" style="margin: 0 10px">
            <el-button type="primary" class="el-icon-edit" circle @click="editTeacher(scope.row.teacherId)">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除教师" placement="top">
            <el-button type="danger" class="el-icon-delete" circle
                       @click="removeTeacher(scope.row.teacherId)">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页区域 -->
    <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
    >
    </el-pagination>
  </el-card>

</template>

<script>
export default {
  name: "List",
  data() {
    return {
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
      //教师集合
      greatTeacher: [],
      //查询信息
      queryInfo: {
        //教师姓名
        teacherName: '',
      },
      //教师id数组
      ids: []
    }
  },
  created() {
    this.getTeacherList()
  },
  methods: {
    /* 获取教师列表 */
    async getTeacherList() {
      let result = await this.$http.teacher.reqTeacherList(this.page, this.limit, this.queryInfo)
      if (result.code !== 200) return this.$message.error('教师列表获取失败')
      console.log(result)
      this.greatTeacher = result.data.rows
      this.total = result.data.total
    },
    /*删除教师*/
    async removeTeacher(id) {
      const confrimResult = await this.$confirm('此操作将永久删除该教师是否继续?', '删除提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消操作',
        type: "warning"
      }).catch(err => err)
      if (confrimResult !== "confirm") return this.$message.info("删除操作已取消")
      let result = await this.$http.teacher.reqRomoveTeacherById(id)
      if (result.code !== 200) return this.$message.error('教师删除失败')
      this.$message.success("删除成功")
      this.queryInfo = {}
      this.getTeacherList()
    },
    //.分页:显示数据行数的监听事件
    handleSizeChange(newSize) {
      this.limit = newSize
      this.getTeacherList()
    },
    //.分页:页码改变监听事件
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getTeacherList()
    },
    //修改教师
    editTeacher(id) {
      this.$router.push(`/teacher/add/${id}`)
    },
    //批量删除
    async removeTeachers() {
      //判断是否选中
      if (this.$refs.teacherRef.selection.length <= 0) {
        return this.$message.warning("请先选中教师!")
      }
      //判断是否确认删除
      const confirmResult = await this.$confirm('此操作将永久删除选中教师是否继续?', '删除提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消操作',
        type: "warning"
      }).catch(err => err)
      if (confirmResult !== "confirm") {
        return this.$message.info("删除操作已取消")
      }
      //根据id数组批量删除新闻
      this.$refs.teacherRef.selection.forEach(item => {
        this.ids.push(item.teacherId)
      })
      let result = await this.$http.teacher.reqRemoveTeachers(this.ids)
      if (result.code !== 200) return this.$message.error(result.message)
      this.$message.success("批量删除成功")
      this.ids = []
      this.getTeacherList()
    },
    addTeacher(){
      this.$router.push('/teacher/add')
    }
  },

}
</script>

<style scoped>

</style>
